<!--精选商品-->
<template>
  <div class="goods">
    <h3>精选商品</h3>

    <ul>
      <li v-for="item in lists" :key="item.id" @click="jumpDetails(item.id, item.goods_id,item)">
        <!-- <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png"> -->
        <img :src="item.goods_logo" alt>
        <div>
          <el-tooltip class="item" effect="dark" :content="item.goods_title" placement="top-start">
            <p>{{ item.goods_title }}</p>
          </el-tooltip>
          <!-- <p>{{ item.goods_title }}</p> -->
          <p>{{ item.details }}</p>
          <span>
            <i>￥</i>
            {{ item.selling_price }}
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import goods from "../../../assets/images/goods1.png" // 图片
export default {
  name: "Selectionofgoods",

  data() {
    return {
      lists: [
        {
          imgSrc: goods,
          model: `603DCE CHG`,
          details: `商品详细信息`,
          price: `149.00`,
          id: 5
        },
      ]
    }
  },

  methods: {
    jumpDetails(id, pid,item) {
      this.$router.push({
        name: "productDetails",
        params: {
          id,
          pid,
          item
        }
      })
    },
    async getInfo() {
      
      let cate_id = this.$store.state.cateId // 精选商品的id的 存储
      let res = await this.$http({
        method:'post',
        url:'/api/index/api/featuredGoods',
        data:{
          cate_id
        }
      })
      if(res.data.State.Code == 200){
        this.lists = res.data.data
      }
      
    }
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style lang="scss" scoped>
.goods {
  width: 224px;
  height: 926px;
  overflow: hidden;
  border: solid 1px #dfdfdf;
  h3 {
    text-align: center;
    line-height: 32px;
    background: #f3f3f3;
    border-bottom: 1px solid #dfdfdf;
  }
  ul {
    li {
      width: 202px;
      height: 70px;
      margin: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #dfdfdf;
      padding: 20px 0px;
      cursor: pointer;
      img {
        width: 70px;
        height: 70px;
        padding-right: 10px;
        &:hover {
          opacity: 0.8;
        }
      }
      p {
        width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        color: red;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>
